<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <select class="pro">
        <option value="请选择">请选择</option>
    </select>
    <select class="city">
        <option value="请选择">请选择</option>
    </select>
    <select class="area">
        <option value="请选择">请选择</option>
    </select>

    <script src="../js/ajax.js"></script>
    <script>


        // 1 事件是嵌套关系
        // 2 市的数据是根据list来的  区的数据是 根据市来的
        // 3 有4个直辖市（没有区）
        //    渲染区之前要判断   判断有没有list


        // 4 请选择。。。
        //   省份    市和区清空
        //   市      区清空

        // 5 二次选择
        //   省份发生改变的时候   区需要清空



        const oPro = document.querySelector('.pro');
        const oCity = document.querySelector('.city');
        const oArea = document.querySelector('.area');

        ajax({
            path: '../data/proData.json',
            success: res => {
                // 数据请求成功以后，一定要打印！！！！！
                console.log(res);   // 是一个对象
                const { list } = res;   // list原有的键名   proArr才是变量
                console.log(list);
                let proHTML = '<option value="请选择">请选择</option>';
                list.forEach(v => {
                    const { name } = v;
                    proHTML += `<option value="${name}">${name}</option>`;
                })
                oPro.innerHTML = proHTML;


                oPro.onchange = function () {

                    oArea.innerHTML = '<option value="请选择">请选择</option>';


                    // 获取省份
                    const pro = this.value;
                    console.log(pro);
                    if (pro === '请选择') {
                        oCity.innerHTML = '<option value="请选择">请选择</option>';
                        oArea.style.display = 'inline-block';
                        oArea.innerHTML = '<option value="请选择">请选择</option>';
                        return;
                    }
                    // 找到数据中对应的省份的那一条数据
                    const arr = list.filter(v => v.name === pro);
                    console.log(arr);
                    const cityArr = arr[0].list;
                    console.log(cityArr);
                    let cityHTML = '<option value="请选择">请选择</option>';
                    cityArr.forEach(v => {
                        const { name } = v;
                        cityHTML += `<option value="${name}">${name}</option>`;
                    })
                    oCity.innerHTML = cityHTML;


                    // 市
                    oCity.onchange = function () {
                        const city = this.value;
                        // 对应的市里面去过滤数据
                        if (city === '请选择') {
                            oArea.innerHTML = '<option value="请选择">请选择</option>';
                            return;
                        }
                        const arr = cityArr.filter(v => v.name === city);
                        console.log(arr);
                        const areaArr = arr[0].list;   // 需要判断直辖市
                        if (areaArr) {
                            oArea.style.display = 'inline-block';
                            let areaHTML = '<option value="请选择">请选择</option>';
                            areaArr.forEach(v => {
                                const { name } = v;
                                areaHTML += `<option value="${name}">${name}</option>`;
                            })
                            oArea.innerHTML = areaHTML;
                        } else {
                            oArea.style.display = 'none';
                        }

                    }

                }

            }
        })





    </script>

</body>

</html>